<template>
	<view class="uni-page">
		<view class="form-box">
			<view class="logo">
				<image src="../../static/logo.png" style="width: 128upx; height: 128upx;" mode=""></image>
			</view>
			<view class="notice">
				<uni-notice-bar show-icon scrollable single :text="notice" :speed="20" />
			</view>
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType='text' />
			</view>
			<view class="content">
				<view v-if="current === 0">
					<uni-forms :modelValue="loginData" ref="loginForm" :rules="login_rules">
						<uni-forms-item label="账号" name="username">
							<uni-easyinput type="text" v-model="loginData.username" placeholder="请输入6-12位账号" />
						</uni-forms-item>
						<uni-forms-item label="密码" name="password">
							<uni-easyinput type="password" v-model="loginData.password" placeholder="请输入6-12位密码" />
						</uni-forms-item>
						<uni-forms-item label="二次密码" name="ggyzm" v-if="twoPswShow">
							<uni-easyinput type="password" v-model="loginData.ggyzm" placeholder="请输入二次验证码" />
						</uni-forms-item>
					</uni-forms>
					<button @click="loginSubmit('loginForm')" type="primary">登录</button>
				</view>
				<view v-if="current === 1">
					<uni-forms :modelValue="registerData" ref="registerForm" :rules="register_rules">
						<uni-forms-item label="账号" name="username">
							<uni-easyinput type="text" v-model="registerData.username" placeholder="请输入6-12位账号" />
						</uni-forms-item>
						<uni-forms-item label="密码" name="password">
							<uni-easyinput type="password" v-model="registerData.password" placeholder="请输入6-12位密码" />
						</uni-forms-item>
						<uni-forms-item label="确认密码" name="confPassword">
							<uni-easyinput type="password" v-model="registerData.confPassword"
								placeholder="请输入6-12位密码" />
						</uni-forms-item>
					</uni-forms>
					<button @click="registerSubmit('registerForm')" type="primary">注册</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		customRef,
		onMounted,
		reactive,
		ref
	} from 'vue'
	import {
		getNoticeAPI,
		login
	} from '@/apis/login.js'
	import {
		registerAPI
	} from '@/apis/register.js'
	import {
		useMemberStore,
		useTokenStore,
		useSettingStore,
	} from '@/stores'
	import {
		getUserInfoAPI,
		SetAPI
	} from '@/apis/user.js'
	const items = ref(['登录', '注册'])
	const current = ref(0)
	const notice = ref('')
	const twoPswShow = ref(false)
	const registerForm = ref(null) // 新增组别表单 DOM
	const registerData = ref({
		'username': '',
		'password': '',
		'confPassword': ''
	})
	const loginForm = ref(null) // 新增组别表单 DOM
	const loginData = ref({
		'username': 'test123',
		'password': 'test123',
		'ggyzm': '',
	})
	const login_rules = ref({
		username: {
			rules: [{
					required: true,
					errorMessage: '请填写用户名',
				},
				{
					minLength: 6,
					maxLength: 12,
					errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
				}
			],
			label: '用户名',
			validateTrigger: 'submit'
		},
		password: {
			rules: [{
					required: true,
					errorMessage: '请填写密码',
				},
				{
					minLength: 6,
					maxLength: 12,
					errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
				}
			],
			label: '密码',
			validateTrigger: 'submit'
		},
		ggyzm: {
			rules: [{
				required: true,
				errorMessage: '请填写二次验证',
			}],
			label: '二次验证',
			validateTrigger: 'submit'
		}
	})
	const register_rules = ref({
		username: {
			rules: [{
					required: true,
					errorMessage: '请填写用户名',
				},
				{
					minLength: 6,
					maxLength: 12,
					errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
				}
			],
			label: '用户名',
			validateTrigger: 'submit'
		},
		password: {
			rules: [{
					required: true,
					errorMessage: '请填写密码',
				},
				{
					minLength: 6,
					maxLength: 12,
					errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
				}
			],
			label: '密码',
			validateTrigger: 'submit'
		},
		confPassword: {
			rules: [{
					required: true,
					errorMessage: '请填写确认密码',
				},
				{
					minLength: 6,
					maxLength: 12,
					errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
				}
			],
			label: '确认密码',
			validateTrigger: 'submit'
		},
	})
	const registerSubmit = () => {
		registerForm.value.validate(async (err, value) => {
			if (!err) {
				const {
					code,
					msg
				} = await registerAPI(registerData.value)
				if (code == 1) {
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				}

			} else {
				return
			}
		})
	}
	const loginSubmit = () => {
		loginForm.value.validate(async (err, value) => {
			if (!err) {
				const res = await login(loginData.value)
				if (res.code == 3) {
					twoPswShow.value = true
				}
				if (res.code == 1) {
					// 保存会员信息
					const tokenStore = useTokenStore()
					const memberStore = useMemberStore()
					const settingStore = useSettingStore()
					tokenStore.setToken(res.data.token)
					// 获取用户
					const {
						data
					} = await getUserInfoAPI()
					// 存在本地
					memberStore.setProfile(data.userinfo)
					// 设置存储
					const setting = await SetAPI()

					// 设置设置
					settingStore.setSetting(setting.data)
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})


					// 跳转首页
					setTimeout(() => {

						uni.switchTab({
							url: '/pages/index/index'
						})

					}, 1500)
				}

			} else {
				return
			}
		})
	}



	const getNotice = async () => {
		const res = await getNoticeAPI()

		notice.value = res.data.gonggao

	}
	onMounted(() => {
		getNotice()
	})
	const onClickItem = e => {
		current.value = e.currentIndex

	}
</script>

<style lang="scss">
	.uni-page {
		.form-box {

			padding-top: 100rpx;

			.logo {
				height: 40upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 40upx;
				padding: 100upx;
			}

			.content {
				padding: 40rpx;
			}
		}

	}
</style>